<template>
  <div id="main" ref="main"></div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    this.barChart();
  },
  methods: {
    barChart() {
      const myChart = echarts.init(this.$refs.main);
      const option = {
        title: {
          text: "故障次数、时长排名",
          subtext: "时间 05月",
          left: "center"
        },
        legend: {
          data: [
            "Direct",
            "Mail Ad",
            "Affiliate Ad",
            "Video Ad",
            "Search Engine"
          ],
          bottom: 0,
          icon: "circle"
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        series: [
          {
            name: "Direct",
            type: "bar",
            data: [320, 302, 301, 334, 390, 330, 320],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 16
                  }
                }
              }
            }
          },
          {
            name: "Mail Ad",
            type: "bar",
            data: [120, 132, 101, 134, 90, 230, 210],
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "black",
                    fontSize: 16
                  }
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>